<template>
    <div class="reMain"> 
        <div class="header">
            <div class="logo">
                <img src="/imgs/re/house.jpeg" alt="">
                <div class="title">
                    马术等级考试系统
                </div>
            </div>
            <div class=""></div>
            <div class="users">
                <i class="fa fa-user-o"></i> <span>张三丰</span>
            </div>
        </div>
        <div class="leftPan">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :router="true"
            >
                <el-menu-item index="/ReMain/User">
                    <i class="el-icon-menu"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/ReMain/Game">
                    <i class="el-icon-menu"></i>
                    <span slot="title">比赛项目</span>
                </el-menu-item>
                <el-menu-item index="/ReMain/Match">
                    <i class="el-icon-menu"></i>
                    <span slot="title">竞赛场次</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="mainPan">
            <router-view ></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
    .header{
        position: fixed;
        width: 100%;
        padding: 10px 15px;
        box-shadow: 2px 2px 2px #999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 99;
        background-color: #fff;
        border-bottom: 2px solid #f5f9fa;

        .logo{
            display: flex;
            align-items: center;
            img{
                height: 32px;
                width: 32px;
                border-radius: 50%;
            }
            .title{
                padding-left: 10px;
                font-weight: bold;
                font-size: 1.2em;
            }
        }
    }

    .leftPan{
        background-color: #fff;
        position: fixed;
        height: 100%;
        width: 160px;
        z-index: 90;
        padding-top: 60px;
    }

    .mainPan{
        padding-left: 160px;
        padding-top: 55px;
    }
</style>